<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入jquery -->
    <script src="js/jquery-1.9.1.min.js"></script>
    <!-- 引入模板引擎 -->
    <script src="js/template.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js.geotools/dist/geotools.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js.geotools/dist/geotools-swedish-zipcodes.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script>
    <script src="./src/fancyTable.js"></script>
    <!-- 引入last.css  -->
    <link rel="stylesheet" href="css/last.css">

    <!-- 发送ajax 查询请求 -->
    <script type="text/javascript">
        function login() {
            $.ajax({
                //几个参数需要注意一下
                type: "POST", //方法类型
                url: "http://yourIPAddress:5000/charfole", //replace yourIPAddress to your own IP
                data: $('#form1').serialize(),
                success: function(result) {
                    if (result != "You have an error in your SQL syntax, please check and try again!") {
                        alert("SUCCESS");
                        if (result[result.length-1] == '!') {
                            return ;
                        }
                        var tpl = template(document.getElementById('tpl').innerHTML);
                        var html = tpl({
                            data: result
                        });
                        document.getElementById('wrap').innerHTML = html;
                        template.config({
                            compress: true
                        });
                        var tpl = template(document.getElementById('tpl').innerHTML);
                        $(document).ready(function() {
                            // And make them fancy
                            $("#sampleTableA").fancyTable({
                                sortColumn: 0,
                                pagination: true,
                                perPage: 25,
                                globalSearch: true
                            });
                            // 设置删除的点击事件
                            $(".shanchu").click(function() {
                                $(this).parent().parent().remove();
                            })
                        });
                    } else {
                        alert("FALSE");
                    }
                },
                error: function() {
                    alert("异常！");
                }
            });
        }
    </script>

    <!-- 发送ajax execute事务 -->
    <script type="text/javascript">
        function execute() {
            $.ajax({
                //几个参数需要注意一下
                type: "POST", //方法类型
                // dataType: "json", //预期服务器返回的数据类型
                url: "http://yourIPAddress:5000/charfoleTransaction", //replace yourIPAddress to your own IP
                data: $('#form2').serialize() + "&action=execute",
                success: function(data, textStatus, xhr) {
                    // console.log(data);
                    // console.log(textStatus);
                    // console.log(xhr.status); //打印服务端返回的数据(调试用)
                    // console.log(event.status);
                    if (xhr.status != 250) {
                        alert("SUCCESS");
                    } else {
                        alert("FALSE");
                    }
                },
                error: function() {
                    alert("异常！");
                }
            });
        }
    </script>

    <!-- 发送ajax rollback事务 -->
    <script type="text/javascript">
        function rollback() {
            $.ajax({
                //几个参数需要注意一下
                type: "POST", //方法类型
                // dataType: "json", //预期服务器返回的数据类型
                url: "http://yourIPAddress:5000/charfoleTransaction", //replace yourIPAddress to your own IP
                data: $('#form2').serialize() + "&action=rollback",
                success: function(data, textStatus, xhr) {
                    // console.log(data);
                    // console.log(textStatus);
                    // console.log(xhr.status); //打印服务端返回的数据(调试用)
                    // console.log(event.status);
                    if (xhr.status != 250) {
                        alert("SUCCESS");
                    } else {
                        alert("FALSE");
                    }
                },
                error: function() {
                    alert("异常！");
                }
            });
        }
    </script>

    <!-- 发送ajax commit事务 -->
    <script type="text/javascript">
        function commit() {
            $.ajax({
                //几个参数需要注意一下
                type: "POST", //方法类型
                // dataType: "json", //预期服务器返回的数据类型
                url: "http://yourIPAddress:5000/charfoleTransaction", //replace yourIPAddress to your own IP
                data: $('#form2').serialize() + "&action=commit",
                success: function(data, textStatus, xhr) {
                    if (xhr.status != 250) {
                        alert("SUCCESS");
                    } else {
                        alert("FALSE");
                    }
                },
                error: function() {
                    alert("异常！");
                }
            });
        }
    </script>


    <link rel="stylesheet" href="css/test.css">
</head>

<body>
    <div id="wrap"></div>

    <script id="tpl" type="text/html">

        <div class="htmleaf-container">
            <div class="container" style="padding: 30px 0;">
                <h3 align="center">数据库系统课程项目</h3>
                <!-- 输入MySQL语句 -->
                <form align="center" id="form1" onsubmit="return false" action="##" method="post">
                    <input type="text" placeholder="请输入MySQL语句" style="width:500px" name="SQL">
                    <input type="submit" value="MySQL输入" onclick="login()">
                </form>

                <!-- 事务处理 -->
                <form align="center" id="form2" onsubmit="return false" action="##" method="post" style="margin: 25px 0 ">
                    <input type="text" placeholder="请输入事务的MySQL语句" style="width:500px" name="SQL">
                    <input type="button" value="执行" onclick="execute()">
                    <input type="button" value="提交" onclick="commit()">
                    <input type="button" value="回滚" onclick="rollback()">
                </form>

                <table id="sampleTableA" class="table table-striped sampleTable">
                    <thead>
                        <tr>
                            <%for(i = 0; i < data[0].length; i++) {%>

                                <th>
                                    <%=data[0][i]%>
                                </th>


                                <%}%>
                        </tr>
                    </thead>
                    <tbody>
                        <%var k = 0%>
                            <%for(i = 0; i < data[1].length; i++) {%>
                                <tr>
                                    <%for(j = 0; j < data[1][i].length; j++) {%>

                                        <td>
                                            <%=data[1][i][j]%>
                                        </td>

                                        <%k=j%>
                                            <%}%>



                                                <td>
                                                    <button class="shanchu" style="float: right;margin-right: 55px" data-id=<%=data[1][i][0]%>>删除</button>
                                                </td>
                                </tr>
                                <%}%>
                    </tbody>
                </table>
            </div>
        </div>
    </script>

    <script>
        // 通过ajax获取数据库里面的数据
        $.ajax({
            url: "http://yourIPAddress:5000/charfole",
            type: "GET",
            dataType: "json",
            success: function(data) {
                // console.log(data[1][199]);
                var tpl = template(document.getElementById('tpl').innerHTML);
                var html = tpl({
                    data: data
                });
                document.getElementById('wrap').innerHTML = html;
                template.config({
                    compress: true
                });
                var tpl = template(document.getElementById('tpl').innerHTML);
                $(document).ready(function() {
                    // And make them fancy
                    $("#sampleTableA").fancyTable({
                        sortColumn: 0,
                        pagination: true,
                        perPage: 25,
                        globalSearch: true
                    });
                    // 设置删除的点击事件
                    $(".shanchu").click(function() {

                        // console.log($(this).attr("data-id"));
                        $(this).parent().parent().remove();
                    })


                });


            }
        })
    </script>

</body>

</html>